import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
import { withKnobs } from "@storybook/addon-knobs";
import { ViewPort, LeftResizable, Fill } from "../../";
import { action } from '@storybook/addon-actions';
import { green, red, description } from "../Utils";
import { CommonHeader } from "../Utils";

<CommonHeader />

<Meta title="Basic examples/Resize events" />

## Resizable space with state controlled size

By default the size of a resizable space is uncontrolled. Therefore the initial size passed is is 
only the initial size of a space and React Spaces deals with any resizing. To keep the size of a 
space controlled in state you need to use the onResizeEnd event to set the new size of a space
after a resize back to a state value.

<Canvas>
	<Story name="Controlled size">
		{
			() => {
				const [ size, setSize ] = React.useState("15%");
				return (
					<React.StrictMode>
						<ViewPort>
							<LeftResizable size={size} style={red} trackSize={true} onResizeEnd={(newSize) => setSize(newSize)}>
								{description("Left")}
							</LeftResizable>
							<Fill style={green} trackSize={true}>{description("Fill")}</Fill>
						</ViewPort>
					</React.StrictMode>
				)
			}
		}
	</Story>
</Canvas>

## Cancelling resize with onResizeStart

You can cancel a resize by returning `false` from a onResizeStart event handler.

<Canvas>
	<Story name="Cancelled resize">
		{
			() => {
				return (
					<React.StrictMode>
						<ViewPort>
							<LeftResizable size="15%" style={red} trackSize={true} onResizeStart={() => false}>
								{description("Left")}
							</LeftResizable>
							<Fill style={green} trackSize={true}>{description("Fill")}</Fill>
						</ViewPort>
					</React.StrictMode>
				)
			}
		}
	</Story>
</Canvas>
